<template>
    <div>
      <div class="search-bar">
        <el-input v-model="search.name" placeholder="搜索姓名" class="search-item"></el-input>
        <el-input v-model="search.hospital" placeholder="搜索医院" class="search-item"></el-input>
        <el-input v-model="search.department" placeholder="搜索科室" class="search-item"></el-input>
        <el-select v-model="search.status" placeholder="账号状态" class="search-item">
          <el-option label="已启用" value="已启用"></el-option>
          <el-option label="已停用" value="已停用"></el-option>
          <el-option label="未启用" value="未启用"></el-option>
          <el-option label="空" value=""></el-option>
        </el-select>
        <el-button type="primary" @click="toback">退出</el-button>
        <el-button type="primary" @click="searchDoctors(search)">搜索</el-button>
      </div>
      <el-table :data="doctors" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="电话" width="150"></el-table-column>
          <el-table-column prop="hospital" label="医院"></el-table-column>
          <el-table-column prop="professor" label="职称"></el-table-column>
          <el-table-column prop="department" label="科室"></el-table-column>
          <el-table-column prop="year" label="年限"></el-table-column>
          <el-table-column prop="role" label="级别"></el-table-column>
          <el-table-column prop="type" label="特权"></el-table-column>
          <el-table-column prop="status" label="账号状态"></el-table-column>
          <el-table-column prop="date" label="创建时间"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { searchDoctorApi } from '@/api/api';
  import router from '@/router';
  import { ElMessage } from 'element-plus';
  import { ref } from 'vue';
  
  const search = ref({
    name: '',
    hospital: '',
    status: '',
    department: ''
  });
  
  const doctors = ref([]);
  
  const toback = () => {
    router.push({ name: 'doctor' });
  };
  
  async function searchDoctors(search) {
    try {
      const response = await searchDoctorApi(search);
      
      // 测试
      console.log(response.data); // 访问 data
      console.log(response.code); // 访问 code
  
      // 当后端返回200表示成功
      if (response.code === 200) {
        console.log(response.data)
        doctors.value = response.data; // 数据在response.data
        ElMessage({
          message: '查询成功',
          type: 'success',
          plain: true,
        });
      } else {
        ElMessage({
          message: response.msg,
          type: 'error',
          plain: true,
          duration: 1500,
        });
      }
    } catch (error) {
      // 当出现前端异常时, 也应该给出合理提示
      ElMessage({
        message: '查询失败',
        type: 'error',
        plain: true,
        duration: 1500,
      });
    }
  };
  </script>
  
  <style scoped>
  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .search-item {
    flex: 1;
  }
  </style>
  